<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			#main {
				border: 1px solid red;
				margin-left: 100px;
			}
		</style>
	</head>
	<body>
		<div id="main" style="width: 1000px; height: 500px"></div>
		<script type="module">
			import { Grender, Circle, Rect, Polygon,Layer } from "../lib/index.js";
			const grender = new Grender(document.getElementById("main"), {});
			const layer = new Layer();
			const circle = new Circle({
				shape: { x: 90, y: 90, r: 40 },
				style: {
					fillStyle: "pink",
				},
				draggable: true,
			});

			const circle2 = new Circle({
				shape: { x: 80, y: 50, r: 40 },
				style: {
					fillStyle: "#323234",
				},
				draggable: true,
			});
			const rect = new Rect({
				shape: { x: 100, y: 70, width: 80, height: 80 },
				style: { fillStyle: "red" },
				draggable: true,

			});

			const polygon = new Polygon({
				shape: {
					points: [
						{ x: 50, y: 320 },
						{ x: 380, y: 400 },
						{ x: 120, y: 200 },
						{ x: 20, y: 110 },
					],
				},
				style: { fillStyle: "pink" },
				draggable: true,

			});
			circle.fillLinearGradient({
				start: { x: 100, y: 70 }, // 起始点
				end: { x: 1180, y: 270 }, // 终止点
				colorStops: [
					[0, "blue"],
					[1, "yellow"],
				],
			});
			layer.add([circle,rect,polygon,circle2]);
			grender.add(layer);
			rect.fillLinearGradient({
				start: { x: 100, y: 70 }, // 起始点
				end: { x: 1180, y: 270 }, // 终止点
				colorStops: [
					[0.2, "pink"],
					[1, "yellow"],
				],
			});

			polygon.fillLinearGradient({
				start: { x: 100, y: 70 }, // 起始点
				end: { x: 1180, y: 270 }, // 终止点
				colorStops: [
					[0, "#ccc"],
					[1, "#666"],
				],
			});
			circle.on("click", e => {
				console.log("点击圆");
			});
			circle2.on("click", e => {
				e.stopPropagation();
				console.log("点击圆2");
			});
			rect.on("click", e => {
				console.log("点击矩形");
			});
			polygon.on("click", e => {
				console.log("点击多边形");
			});
			grender.refresh();
			setTimeout(() => {
				// circle.change(
				// 	{
				// 		shape: { x: 50, y: 50, r: 30 },
				// 		style: {
				// 			fillColor: "blue",
				// 		},
				// 	},
				// );
			}, 3000);
		</script>
	</body>
</html>
